<template>
    <transition name="fade">
        <div class="player-list" v-show="isShow" @click="hide">
            <div class="player-content" @click.stop>
                <div class="player-header">
                    <i class="icon left" :class="modeInfo.icon" @click="changeMode"></i>
                    <span class="text" v-text="modeInfo.text"></span>
                    <i class="icon-clear right" @click="showConfirm"></i>
                </div>
                <div>
                    <scroll class="player-music-list" :refreshDelay="200" :datalength="playlist.length" ref="scroll">
                        <transition-group name="test" tag="ul" class="list">
                            <li :key="song.id" class="item1" v-for="(song, index) in playlist" ref="items">
                                <i class="current" :class="{'icon-play': song.id === currentSong.id}"></i>
                                <span class="name" v-text='song.name' @click="selectItem(song, index)"></span>
                                <span class="operation">
                                <i class="icon first" :class='[isLove(song) ? "icon-favorite" : "icon-not-favorite"]' @click.stop='toggleLove(song)'></i>
                                <i class="icon icon-delete last" @click.stop="deleteOne(song)"></i>
                                </span>
                            </li>
                        </transition-group>
                    </scroll>
                </div>
                <div class="player-operation">
                    <div class="player-add-wrapper" @click='showAddSong'>
                        <i class="icon-add"></i>
                        <span class="text">添加歌曲到队列</span>
                    </div>
                </div>
                <div class="player-bottom" @click="hide">
                    <span class="text">关闭</span>
                </div>
            </div>
            <!-- 这里有一个事件冒泡 -->
            <confirm text="是否清空播放列表" ref="confirm" @confirm="deleteItem"></confirm>
            <AddSong ref="addSong"></AddSong>
        </div>
    </transition>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex';
    import scroll from '@/base/scroll';
    import confirm from '@/base/confirm';
    import { playerMixin } from '@/common/js/mixin';
    import AddSong from '../add-song/add-song';

    export default {
        mixins: [playerMixin],
        name: 'player-list',
        data() {
            return {
                isShow: false,
            };
        },
        computed: {
            ...mapGetters(['playlist']),
        },
        methods: {
            showAddSong() {
                this.$refs.addSong.show();
            },
            deleteOne(song) {
                this.deleteSong(song);
                this.$refs.scroll.refresh();
                if (this.playlist.length === 0) {
                    this.hide();
                }
            },
            deleteItem() {
                this.clearPlayList();
            },
            showConfirm() {
                this.$refs.confirm.show();
            },
            selectItem(song, index) {
                this.scrollToSong(song);
                this.selectPlay({ index });
            },
            scrollToSong(song) {
                const index = this.playlist.findIndex(item => item.id === song.id);
                this.$refs.items && this.$refs.scroll.scrollToElement(this.$refs.items[index], 400);
            },
            show() {
                this.isShow = true;
                setTimeout(() => {
                    this.$refs.scroll.refresh();
                    this.scrollToSong(this.currentSong);
                }, 20);
            },
            hide() {
                this.isShow = false;
            },
            ...mapActions(['clearPlayList', 'selectPlay', 'deleteSong']),
        },
        watch: {
            currentSong(now) {
                this.scrollToSong(now);
            },
        },
        components: {
            scroll,
            confirm,
            AddSong,
        },
    };
</script>
<style lang="stylus" scoped>
    @import '~styl/var'
    @import '~styl/mixin'
    .player-list
        position fixed
        top 0
        left 0
        bottom 0
        right 0
        z-index $higher
        background $color-background-d
        &.fade-enter-active, &.fade-leave-active
            transition opacity .4s
            .player-content
                transition: transform .4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
        &.fade-enter, &.fade-leave-to
            opacity 0
            .player-content
                transform translate3d(0, 100px, 0)
        .player-content
            position absolute
            bottom 0
            width 100%
            background $color-highlight-background
            .player-header
                padding 20px 30px 10px 20px
                align-items center
                display flex
                justify-content space-between
                .left
                    font-size 30px
                    margin-right 10px
                    color $color-theme-d
                .text
                    flex 1
                    font-size $font-size-medium
                    color $color-text-l
                .right
                    font-size $font-size-medium
                    color $color-text-d
            .player-music-list
                overflow hidden
                max-height 240px
                .list
                    padding 0 30px 0 20px
                    .item1
                        display flex
                        align-items center
                        height 40px
                        &.test-enter-active, &.test-leave-active
                            transition all .5s
                        &.test-enter, &.test-leave-to
                            opacity 0
                            height 0
                            transform translate3d(30px, 0 ,0)
                        .current
                            width 20px
                            &.icon-play
                                font-size $font-size-small
                                color $color-theme-d
                        .name
                            flex 1
                            font-size $font-size-medium
                            color $color-text-d
                        .operation
                            font-size 0
                            .icon
                                color #ffcd32
                                font-size $font-size-small
                                &.first
                                    margin-right 15px
            .player-operation
                text-align center
                font-size 0
                margin-top 20px
                margin-bottom 30px
                .player-add-wrapper
                    display inline-block
                    padding 8px 18px
                    border-radius 100px
                    border 1px solid $color-text-l
                    color $color-text-l
                    .icon-add
                        font-size $font-size-medium-x
                        margin-right 5px
                    .text
                        vertical-align text-bottom
                        font-size $font-size-small
            .player-bottom
                line-height 50px
                text-align center
                background $color-background
                .text
                    font-size $font-size-medium-x
                    color $color-text-l
</style>
